<template>
  <div class="win">
    <div class="win_header">
      <div class="username">dpp</div>
      <div class="menu">...</div>
    </div>
    <div class="scroll">
      <div class="win_container" :style="{ height: height1 + 'px' }">
        <div class="msg" v-for="(item, index) in msgList" :key="index"
          :style="{ flexDirection: item.toword === 'left' ? 'unset' : 'row-reverse' }">
          <span><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" /></span><span
            class="msg_box"> {{
              item.msg }}</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { nextTick, onBeforeMount, onMounted, ref } from 'vue';

interface MsgBox {
  avatar: string,
  msg: string,
  toword: string
}

let msgList = ref<MsgBox[]>()
const isLeft = (toword) => {

}
let height1 = ref()
onMounted(() => {
  const e = document.querySelector('.win_container')
  height1.value = e?.clientHeight
  console.log(e?.clientHeight);
})
nextTick(() => {
  msgList.value = [
    { avatar: '', msg: "dpphttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", toword: 'left' },
    { avatar: '', msg: "dpphttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", toword: 'right' },
    { avatar: '', msg: "dpphttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", toword: 'left' },
    { avatar: '', msg: "dpphttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", toword: 'right' },
    { avatar: '', msg: "dpphttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", toword: 'right' },
    { avatar: '', msg: "dpphttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", toword: 'left' },
    { avatar: '', msg: "dpphttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", toword: 'right' },
    { avatar: '', msg: "dpphttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", toword: 'right' },
    { avatar: '', msg: "dpphttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", toword: 'left' },
    { avatar: '', msg: "dpphttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", toword: 'right' },
    { avatar: '', msg: "dpphttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", toword: 'right' },
    { avatar: '', msg: "dpphttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", toword: 'left' },
    { avatar: '', msg: "dpphttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.pnghttps://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", toword: 'right' },
  ]
})
</script>
<style scoped lang="less">
.win {
  height: 100%;
  display: flex;
  flex-direction: column;

  .win_header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(231, 231, 231);
    padding-bottom: 15px;
  }

  .scroll {
    flex: 1;
  }

  .win_container {
    padding-top: 15px;
    overflow-y: auto;
    // flex: 1;
    height: 100%;

    .msg {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .msg_box {
        background-color: white;
        margin-left: 15px;
        padding: 5px 10px;
        border-radius: 5px;
        max-width: 75%;
        word-break: break-all;
      }
    }
  }

}
</style>
